<template>
  <div class="wrap">
    <div class="header">
      <img class="shezhi-icon" src="../../assets/img/mine/shezhi.png" alt="" />
      <div class="profile-row">
        <div class="touxiang">
          <img src="../../assets/img/mine/touxiang.png" alt="" />
        </div>
        <div class="profile-info">
          <div class="nickname-row">
            <span class="nickname-text">熊猫女士</span>
          </div>
          <div class="introduction">用一句话介绍自己...</div>
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="content">
        <div class="content-item" @click="goToFujianjianli">
          <img src="../../assets/img/mine/jianli.png" alt="" />
          <div class="content-text">附件简历</div>
        </div>

        <div class="content-item" @click="goToyitoujianli">
          <img src="../../assets/img/mine/yitou.png" alt="" />
          <div class="content-text">已投简历</div>
        </div>

        <div class="content-item" @click="goTowodeshoucang" >
          <img src="../../assets/img/mine/shoucang.png" alt="" />
          <div class="content-text" >我的收藏</div>
        </div>
      </div>

      <div class="cell">
        <van-cell-group>
          <van-cell
            title="管理求职意向"
            value="在职-考虑机会"
            is-link to="/guanli"
            icon="location-o"
          />
        </van-cell-group >

        <van-cell-group :border="false">
          <van-cell title="个人主页" is-link to="/zhuye" value="" icon="wap-home-o" />
          <van-cell title="关注公司" is-link to="/guanzhu" value="" icon="like-o" />
          <van-cell title="常见问答" is-link to="/wenda" value="" icon="question-o" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="帮助与反馈" is-link to="/bangzhu" value="" icon="warning-o" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { Cell, CellGroup } from "vant";

const router = useRouter();

// 跳转到附件简历页面
const goToFujianjianli = () => {
  router.push("/fujianjianli");
};
// 跳转到已投简历页面
const goToyitoujianli = () => {
  router.push("/yitoujianli");
};
// 跳转到我的收藏页面
const goTowodeshoucang = () => {
  router.push("/wodeshoucang");
};
</script>

<style scoped lang="less">
.header {
  width: 100%;
  height: 193px;
  background: linear-gradient(120deg, #6fb06c 60%, #5bbd8a 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 0 32px 32px;
  box-sizing: border-box;
}

.shezhi-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.profile-row {
  display: flex;
  align-items: center;
  margin-left: -20px;
  position: relative;
  top: -40px;
}

.touxiang img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 24px;
  margin-top: 0px;
}

.nickname-row {
  display: flex;
  align-items: center;
}

.nickname-text {
  width: 186px;
  height: 47px;
  font-family: SourceHanSansCN;
  font-weight: bold;
  font-size: 32px;
  color: #ffffff;
  line-height: 47px;
}

.introduction {
  width: 212rpx;
  height: 24rpx;
  font-family: SourceHanSansCN;
  font-weight: 300;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 70rpx;
}

.foot {
  width: 100%;
  height: 100%;
  position: relative;
}

.content {
  width: 92%;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(20, 150, 57, 0.22);

  border-radius: 10px;

  position: absolute;
  top: -40px;
  left: 15px;
  display: flex;
  justify-content: space-evenly;
}

.content-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // position: relative;
}

.content-item img {
  width: 25px;
  height: 25px;
  display: flex;
  //  justify-content: center;
  //  align-items: center;
}

.cell {
  padding-top: 60px;
}
</style>
